<template>
  <CustomPopup class="cascader-select-popup"
    :title="title"
    :showPickerDlg="showPickerDlg"
    position="bottom"
    @close="onCancel"
    @reset="onReset"
    @confirm="onConfirm"
  >
    <CustomSelectPanel
      v-model="selectValue"
      height="100%"
      :multiple="multiple"
      :color="color"
      :dataList="dataList"
      :props="finalProps"
    />
  </CustomPopup>
</template>

<script>
import CustomPopup from '../CustomPopup/index.vue';
import CustomSelectPanel from '../CustomSelectPanel/index.vue';

const DEFAULT_PROPS = {
  text: 'name',
  value: 'id',
  disabled: undefined,
  pageSize: 20
};

export default {
  name: 'selectPopup',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    value: {
      type: [Number, String, Array]
    },
    showPickerDlg: {
      type: Boolean,
      default: false
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 选中颜色
    color: {
      type: String
    },
    // 列表数据
    dataList: {
      type: [Array, Function],
      default: () => []
    },
    props: {
      type: Object,
      default: () => {
        return {
          ...DEFAULT_PROPS
        }
      }
    }
  },
  components: {
    CustomPopup,
    CustomSelectPanel
  },
  data () {
    return {
      selectValue: undefined
    }
  },
  methods: {
    onCancel () {
      this.$emit('close');
    },
    onConfirm () {
      this.$emit('input', this.selectValue);
      this.$emit('close');
    },
    onReset () {
      this.selectValue = undefined;
    }
  },
  computed: {
    finalProps () {
      return {
        ...DEFAULT_PROPS,
        ...this.props
      }
    }
  },
  watch: {
    value: {
      handler () {
        this.selectValue = this.value;
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
</style>
